<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="订单详情"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <!-- 内容区域 -->
    <view class="content">
      <!-- 加载状态 -->
      <view v-if="detailLoading" class="loading-wrapper">
        <uni-load-more status="loading" />
      </view>

      <!-- 订单详情内容 -->
      <view v-else>
        <!-- 订单基本信息 -->
        <view class="order-header">
          <view class="order-number">{{ orderDetail.orderNo }}</view>
          <view v-if="orderDetail.contactName" class="contact-info">
            <text>收货人：{{ orderDetail.contactName }}</text>
          </view>
          <view v-if="orderDetail.contactPhone" class="contact-info">
            <text>联系方式：{{ orderDetail.contactPhone }}</text>
          </view>
          <view v-if="orderDetail.contactAddress" class="contact-info">
            <text>收货地址：{{ orderDetail.contactAddress }}</text>
          </view>
        </view>

        <!-- 订单类型和金额 -->
        <view class="order-type-card">
          <view class="type-info">
            <view class="icon-wrapper">
              <uni-icons type="shop" size="40" color="#FFB200"></uni-icons>
            </view>
            <text class="type-name">{{ orderDetail.orderType }}</text>
          </view>
          <view class="amount">¥ {{ orderDetail.totalAmount }}</view>
        </view>

        <!-- 订单费用明细 -->
        <view class="order-details">
          <view class="detail-item">
            <text class="label">现金支付</text>
            <text class="value">¥ {{ orderDetail.cashPayment }}</text>
          </view>
          <view v-if="Number(orderDetail.couponAmount) > 0" class="detail-item">
            <text class="label">抵用券</text>
            <text class="value">{{ orderDetail.couponAmount }}</text>
          </view>
          <view v-if="Number(orderDetail.serviceFee) > 0" class="detail-item">
            <text class="label">服务费</text>
            <text class="value negative">- ¥ {{ orderDetail.serviceFee }}</text>
          </view>
          <view
            v-if="Number(orderDetail.transactionFee) > 0"
            class="detail-item"
          >
            <text class="label">手续费</text>
            <text class="value negative"
              >- ¥ {{ orderDetail.transactionFee }}</text
            >
          </view>
          <view
            v-if="Number(orderDetail.income) > 0"
            class="detail-item highlight"
          >
            <text class="label">收入</text>
            <text class="value">¥ {{ orderDetail.income }}</text>
          </view>
          <view class="detail-item">
            <text class="label">订单状态</text>
            <text
              class="value status"
              :class="getStatusClass(orderDetail.status)"
            >
              {{ orderDetail.statusText }}
            </text>
          </view>
        </view>

        <!-- 退款弹窗 -->
        <uni-popup ref="refundPopupRef" type="center" background-color="#fff">
          <view class="refund-modal">
            <view class="modal-header">
              <text class="modal-title">确认退款</text>
            </view>

            <view class="modal-content">
              <view class="refund-info">
                <text class="info-label">订单可退：</text>
                <text class="info-value">¥ {{ orderDetail.totalAmount }}</text>
              </view>

              <view class="refund-type">
                <view class="type-option" @click="selectRefundType('full')">
                  <view
                    class="radio"
                    :class="{ active: refundType === 'full' }"
                  ></view>
                  <text class="option-text">全额退款</text>
                </view>
                <view class="type-option" @click="selectRefundType('partial')">
                  <view
                    class="radio"
                    :class="{ active: refundType === 'partial' }"
                  ></view>
                  <text class="option-text">部分退款</text>
                </view>
              </view>

              <view v-if="refundType === 'partial'" class="refund-input">
                <input
                  v-model="refundAmount"
                  type="digit"
                  placeholder="请输入部分退款金额"
                  placeholder-class="input-placeholder"
                />
              </view>
            </view>

            <view class="modal-footer">
              <view class="modal-btn btn-cancel" @click="closeRefundModal">
                <text>取消</text>
              </view>
              <view class="modal-btn btn-confirm" @click="confirmRefund">
                <text>确认</text>
              </view>
            </view>
          </view>
        </uni-popup>

        <!-- 积分信息 - 只在有积分数据时显示 -->
        <view
          v-if="
            Number(orderDetail.userPoints) > 0 ||
            Number(orderDetail.merchantPoints) > 0 ||
            Number(orderDetail.paymentRatio) > 0
          "
          class="points-section"
        >
          <view class="section-header">
            <text class="title">积分信息</text>
            <text class="link" @click="showPointsDetail">补贴奖励详情</text>
          </view>
          <view class="points-list">
            <view v-if="Number(orderDetail.userPoints) > 0" class="points-item">
              <text class="label">用户可得积分：</text>
              <text class="value">{{ orderDetail.userPoints }}</text>
            </view>
            <view
              v-if="Number(orderDetail.merchantPoints) > 0"
              class="points-item"
            >
              <text class="label">商家可得积分：</text>
              <text class="value">{{ orderDetail.merchantPoints }}</text>
            </view>
            <view
              v-if="Number(orderDetail.paymentRatio) > 0"
              class="points-item"
            >
              <text class="label">收款比例：</text>
              <text class="value">{{ orderDetail.paymentRatio }}%</text>
            </view>
          </view>
        </view>

        <!-- 订单信息 -->
        <view class="order-info-section">
          <view class="section-title">订单信息</view>
          <view class="info-list">
            <view class="info-item">
              <text class="label">订单号</text>
              <view class="value-wrapper">
                <text class="value">{{ orderDetail.orderId }}</text>
                <text class="copy-btn" @click="copyText(orderDetail.orderId)"
                  >复制</text
                >
              </view>
            </view>
            <view class="info-item">
              <text class="label">交易流水号</text>
              <text class="value">{{ orderDetail.transactionId }}</text>
            </view>
            <view class="info-item">
              <text class="label">下单时间</text>
              <text class="value">{{ orderDetail.createTime }}</text>
            </view>
            <view class="info-item">
              <text class="label">支付时间</text>
              <text class="value">{{ orderDetail.paymentTime }}</text>
            </view>
            <view class="info-item">
              <text class="label">备注</text>
              <text class="value">{{ orderDetail.remark || "-" }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部固定按钮 -->
    <view
      class="footer-buttons"
      v-if="orderType === 'online' && orderDetail.expressStatus === 0"
    >
      <view class="footer-btn btn-ship" @click="handleShipOrder">
        <text>去发货</text>
      </view>
    </view>

    <!-- 发货弹窗 -->
    <uni-popup ref="shipPopupRef" type="bottom" background-color="#fff">
      <view class="ship-modal">
        <view class="modal-header-bar">
          <text class="modal-title-bar">订单发货</text>
          <uni-icons
            type="closeempty"
            size="20"
            color="#666"
            @click="closeShipModal"
          ></uni-icons>
        </view>
        <view class="modal-content-ship">
          <view class="ship-info">
            <text class="info-label">订单号：</text>
            <text class="info-value">{{ orderDetail.orderNo }}</text>
          </view>
          <view class="ship-input-wrapper">
            <text class="input-label">快递单号</text>
            <input
              v-model="expressOrder"
              type="text"
              placeholder="请输入快递单号"
              placeholder-class="input-placeholder"
              class="ship-input"
            />
          </view>
        </view>
        <view class="modal-single-button">
          <view class="single-btn" @click="confirmShip">
            <text>确认发货</text>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 添加标识弹窗 -->
    <uni-popup ref="labelPopupRef" type="bottom" background-color="#fff">
      <view class="label-modal">
        <view class="modal-header-bar">
          <text class="modal-title-bar">添加标识</text>
          <uni-icons
            type="closeempty"
            size="20"
            color="#666"
            @click="closeLabelModal"
          ></uni-icons>
        </view>
        <view class="modal-content-label">
          <text class="hint-text">暂无可用标识，可前往"我的-标识"进行设置</text>
          <view class="empty-state">
            <uni-icons type="folder" size="80" color="#FFB200"></uni-icons>
            <text class="empty-text">暂无数据</text>
          </view>
        </view>
        <view class="modal-single-button">
          <view class="single-btn" @click="closeLabelModal">
            <text>保存</text>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 商家备注弹窗 -->
    <uni-popup ref="notePopupRef" type="bottom" background-color="#fff">
      <view class="note-modal">
        <view class="modal-header-bar">
          <text class="modal-title-bar">添加商家备注</text>
          <uni-icons
            type="closeempty"
            size="20"
            color="#666"
            @click="closeNoteModal"
          ></uni-icons>
        </view>
        <view class="modal-content-note">
          <textarea
            v-model="merchantNote"
            placeholder="请输入内容"
            placeholder-class="textarea-placeholder"
            maxlength="300"
            class="note-textarea"
          />
          <view class="char-count">{{ merchantNote.length }}/300</view>
        </view>
        <view class="modal-single-button">
          <view class="single-btn" @click="saveNote">
            <text>保存</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getOfflineOrderList, orderShip } from "@/api/shop";
import { useUserStore } from "@/store/modules/user";
import { useStoreStore } from "@/store/modules/store";
import { useRequest } from "ahooks-vue";
import dayjs from "dayjs";

const userStore = useUserStore();
const storeStore = useStoreStore();

// 订单类型（online=线上订单，offline=线下订单）
const orderType = ref("");

// 订单ID
const orderId = ref("");

// 订单详情数据
const orderDetail = ref({
  orderNo: "",
  contactPhone: "",
  contactName: "",
  contactAddress: "",
  orderType: "",
  totalAmount: "0.00",
  cashPayment: "0.00",
  expressStatus: 0, // 快递状态：0=未发货，1=已发货
  couponAmount: "0",
  serviceFee: "0",
  transactionFee: "0",
  income: "0.00",
  status: "",
  statusText: "",
  userPoints: "0.00",
  merchantPoints: "0.00",
  paymentRatio: "0",
  orderId: "",
  transactionId: "",
  createTime: "",
  paymentTime: "",
  remark: "",
  merchantName: "",
});

// 退款弹窗引用
const refundPopupRef = ref(null);

// 退款类型：full-全额退款，partial-部分退款
const refundType = ref("full");

// 部分退款金额
const refundAmount = ref("");

// 添加标识弹窗引用
const labelPopupRef = ref(null);

// 商家备注弹窗引用
const notePopupRef = ref(null);

// 商家备注内容
const merchantNote = ref("");

// 发货弹窗引用
const shipPopupRef = ref(null);

// 快递单号
const expressOrder = ref("");

// 获取订单详情
const { loading: detailLoading, run: getOrderDetailRun } = useRequest(
  (id) => {
    return getOfflineOrderList({
      // isMerchant: 1,
      merchantId: storeStore.storeId,
      userId: userStore.userId,
      id: Number(id), // 订单ID用于筛选
      offset: 1,
      limit: 1,
      // plural: 4, // 线下订单
    });
  },
  {
    manual: true,
    onSuccess: (res) => {
      console.log("订单详情响应:", res);
      if (res && res.data && res.data.rows && res.data.rows.length > 0) {
        const order = res.data.rows[0];

        // 映射订单数据 - 只使用实际存在的字段
        const tradeMoney = Number(order.tradeMoney) || 0;
        const redPayMoney = Number(order.redPayMoney) || 0;
        const deductionMoney = Number(order.deductionMoney) || 0;
        const feeMoney = Number(order.feeMoney) || 0;
        const offerDiscountsMoney = Number(order.offerDiscountsMoney) || 0;
        const realMoney = Number(order.realMoney) || 0;

        // 构建订单类型显示文本
        let orderTypeText = order.tradeGoodsName || "订单";
        if (order.standard) {
          orderTypeText += ` (${order.standard})`;
        }
        if (order.tradeNumber && order.tradeNumber > 0) {
          orderTypeText += ` x${order.tradeNumber}`;
        }

        orderDetail.value = {
          orderNo: order.orderTradeId || "",
          contactPhone: order.recipientsMobile || "",
          contactName: order.recipientsName || "",
          contactAddress: order.recipientsAddress || "",
          orderType: orderTypeText,
          totalAmount: tradeMoney.toFixed(2),
          cashPayment: (tradeMoney - redPayMoney).toFixed(2),
          expressStatus: order.expressStatus || 0,
          couponAmount: deductionMoney > 0 ? deductionMoney.toFixed(4) : "0",
          serviceFee:
            offerDiscountsMoney > 0 ? offerDiscountsMoney.toFixed(2) : "0",
          transactionFee: feeMoney > 0 ? feeMoney.toFixed(2) : "0",
          income: realMoney > 0 ? realMoney.toFixed(2) : tradeMoney.toFixed(2),
          status: getOrderStatusKey(order.tradeStatus),
          statusText: getOrderStatusText(order.tradeStatus),
          userPoints: (Number(order.gainIntegral) || 0).toFixed(2),
          merchantPoints: (Number(order.gainMerchantIntegral) || 0).toFixed(2),
          paymentRatio: ((Number(order.feeRatio) || 0) * 100).toFixed(0),
          orderId: order.orderTradeId || "",
          transactionId: order.orderTradeFatherId || "",
          createTime: order.tradeTime
            ? dayjs(order.tradeTime).format("YYYY-MM-DD HH:mm:ss")
            : "",
          paymentTime: order.payTime
            ? dayjs(order.payTime).format("YYYY-MM-DD HH:mm:ss")
            : "",
          remark: order.remark || "",
          merchantName: order.merchantName || "",
        };

        console.log("订单详情映射:", orderDetail.value);
      }
    },
    onError: (err) => {
      console.error("获取订单详情失败:", err);
      uni.showToast({
        title: "获取订单详情失败",
        icon: "none",
      });
    },
  },
);

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const statusMap = {
    0: "待支付",
    1: "待发货",
    2: "待收货",
    3: "已取消",
    4: "已完成",
  };
  return statusMap[status] || "未知";
};

// 获取订单状态键值
const getOrderStatusKey = (status) => {
  const statusMap = {
    0: "pending", // 待支付
    1: "pending", // 待发货
    2: "pending", // 待收货
    3: "cancelled", // 已取消
    4: "completed", // 已完成
  };
  return statusMap[status] || "";
};

// 页面加载时接收参数
onLoad((options) => {
  // 从本地缓存恢复店铺信息和用户信息
  storeStore.hydrateFromStorage();
  userStore.hydrateFromStorage();

  if (options.id) {
    orderId.value = options.id;
    // 根据订单 ID 加载详情
    loadOrderDetail(options.id);
  }

  // 接收订单类型参数（online=线上订单，offline=线下订单）
  if (options.type) {
    orderType.value = options.type;
    console.log("订单类型:", orderType.value);
  }
});

// 加载订单详情
const loadOrderDetail = (id) => {
  console.log("加载订单详情:", id);
  if (storeStore.storeId && userStore.userId) {
    getOrderDetailRun(id);
  } else {
    console.error("缺少商户ID或用户ID");
    uni.showToast({
      title: "缺少必要信息",
      icon: "none",
    });
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 获取状态样式类
const getStatusClass = (status) => {
  switch (status) {
    case "withdrawn":
      return "status-withdrawn";
    case "completed":
      return "status-completed";
    case "pending":
      return "status-pending";
    case "refunded":
      return "status-refunded";
    default:
      return "";
  }
};

// 显示退款弹窗
const showRefundModal = () => {
  refundType.value = "full";
  refundAmount.value = "";
  refundPopupRef.value.open();
};

// 关闭退款弹窗
const closeRefundModal = () => {
  refundPopupRef.value.close();
};

// 选择退款类型
const selectRefundType = (type) => {
  refundType.value = type;
  if (type === "full") {
    refundAmount.value = "";
  }
};

// 确认退款
const confirmRefund = () => {
  if (refundType.value === "partial") {
    if (!refundAmount.value) {
      uni.showToast({
        title: "请输入退款金额",
        icon: "none",
      });
      return;
    }

    const amount = parseFloat(refundAmount.value);
    const maxAmount = parseFloat(orderDetail.value.totalAmount);

    if (isNaN(amount) || amount <= 0) {
      uni.showToast({
        title: "请输入有效的退款金额",
        icon: "none",
      });
      return;
    }

    if (amount > maxAmount) {
      uni.showToast({
        title: `退款金额不能超过 ¥${maxAmount}`,
        icon: "none",
      });
      return;
    }
  }

  closeRefundModal();

  // TODO: 调用退款 API
  const refundMsg =
    refundType.value === "full"
      ? `全额退款 ¥${orderDetail.value.totalAmount}`
      : `部分退款 ¥${refundAmount.value}`;

  console.log("执行退款:", refundMsg);

  uni.showToast({
    title: "退款申请已提交",
    icon: "none",
  });
};

// 显示积分详情
const showPointsDetail = () => {
  uni.showToast({
    title: "查看补贴奖励详情",
    icon: "none",
  });
};

// 复制文本
const copyText = (text) => {
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: "复制成功",
        icon: "none",
      });
    },
  });
};

// 添加标识
const handleAddLabel = () => {
  labelPopupRef.value.open();
};

// 关闭标识弹窗
const closeLabelModal = () => {
  labelPopupRef.value.close();
};

// 商家备注
const handleMerchantNote = () => {
  // 加载已有备注
  merchantNote.value = orderDetail.value.remark || "";
  notePopupRef.value.open();
};

// 关闭备注弹窗
const closeNoteModal = () => {
  notePopupRef.value.close();
};

// 处理发货操作
const handleShipOrder = () => {
  console.log("去发货");
  // 清空快递单号
  expressOrder.value = "";
  // 打开发货弹窗
  shipPopupRef.value.open();
};

// 关闭发货弹窗
const closeShipModal = () => {
  shipPopupRef.value.close();
};

// 发货 API 请求
const { loading: shipLoading, run: shipOrderRun } = useRequest(
  (params) => {
    return orderShip(params);
  },
  {
    manual: true,
    onSuccess: (res) => {
      console.log("发货成功:", res);
      closeShipModal();
      uni.showToast({
        title: "发货成功",
        icon: "none",
      });
      // 刷新订单详情
      loadOrderDetail(orderId.value);
    },
    onError: (err) => {
      console.error("发货失败:", err);
      uni.showToast({
        title: "发货失败，请重试",
        icon: "none",
      });
    },
  },
);

// 确认发货
const confirmShip = () => {
  if (!expressOrder.value.trim()) {
    uni.showToast({
      title: "请输入快递单号",
      icon: "none",
    });
    return;
  }

  // 调用发货 API
  shipOrderRun({
    expressOrder: expressOrder.value.trim(),
    id: Number(orderId.value),
    merchantId: storeStore.storeId,
    userId: userStore.userId,
  });
};

// 保存备注
const saveNote = () => {
  // TODO: 调用 API 保存备注
  orderDetail.value.remark = merchantNote.value;

  closeNoteModal();

  uni.showToast({
    title: "备注保存成功",
    icon: "none",
  });
};

onMounted(() => {
  console.log("订单详情页面加载完成");
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding-bottom: 160rpx; // 为底部按钮留出空间
}

// 加载状态
.loading-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600rpx;
  padding: 100rpx 0;
}

// 订单基本信息
.order-header {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.order-number {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.contact-info {
  font-size: 26rpx;
  color: #666;
}

// 订单类型卡片
.order-type-card {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.type-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.icon-wrapper {
  width: 80rpx;
  height: 80rpx;
  background-color: #fff7e6;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.type-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.amount {
  font-size: 40rpx;
  font-weight: 700;
  color: #333;
}

// 订单费用明细
.order-details {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  &.highlight {
    .label,
    .value {
      font-weight: 600;
      font-size: 30rpx;
    }
  }
}

.label {
  font-size: 28rpx;
  color: #666;
}

.value {
  font-size: 28rpx;
  color: #333;

  &.negative {
    color: #666;
  }

  &.status {
    font-size: 26rpx;
    padding: 4rpx 16rpx;
    border-radius: 6rpx;
  }

  &.status-withdrawn {
    color: #ff4d4f;
    background-color: #fff2f0;
  }

  &.status-completed {
    color: #52c41a;
    background-color: #f0f9f0;
  }

  &.status-pending {
    color: #fa8c16;
    background-color: #fff7e6;
  }

  &.status-refunded {
    color: #999;
    background-color: #f5f5f5;
  }
}

// 积分信息
.points-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-header .title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.section-header .link {
  font-size: 26rpx;
  color: #ff6b6b;
}

.points-list {
  .points-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;

    .label {
      font-size: 28rpx;
      color: #666;
    }

    .value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

// 订单信息
.order-info-section {
  background-color: #fff;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
}

.info-list {
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .label {
      font-size: 28rpx;
      color: #666;
      flex-shrink: 0;
      width: 180rpx;
    }

    .value {
      font-size: 28rpx;
      color: #333;
      flex: 1;
      text-align: right;
      word-break: break-all;
    }

    .value-wrapper {
      display: flex;
      align-items: center;
      gap: 16rpx;
      flex: 1;
      justify-content: flex-end;

      .value {
        flex: 1;
      }

      .copy-btn {
        font-size: 26rpx;
        color: #ff6b6b;
        flex-shrink: 0;
      }
    }
  }
}

// 底部固定按钮
.footer-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 20rpx;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background-color: #fff;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.08);
  z-index: 99;
}

.footer-btn {
  flex: 1;
  background-color: #ffb200;
  border-radius: 50rpx;
  padding: 24rpx;
  text-align: center;

  text {
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
  }

  &:active {
    opacity: 0.8;
  }
}

// 发货按钮特殊样式
.btn-ship {
  background-color: #ff6b00;

  text {
    font-weight: 700;
  }
}

// 退款弹窗样式
.refund-modal {
  width: 600rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.modal-header {
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.modal-content {
  padding: 30rpx;
}

.refund-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.info-label {
  font-size: 28rpx;
  color: #666;
}

.info-value {
  font-size: 32rpx;
  font-weight: 600;
  color: #ff4d4f;
}

.refund-type {
  display: flex;
  gap: 40rpx;
  margin-bottom: 30rpx;
}

.type-option {
  display: flex;
  align-items: center;
  gap: 12rpx;
  cursor: pointer;
}

.radio {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #d9d9d9;
  border-radius: 50%;
  position: relative;

  &.active {
    border-color: #ffb200;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 18rpx;
      height: 18rpx;
      background-color: #ffb200;
      border-radius: 50%;
    }
  }
}

.option-text {
  font-size: 28rpx;
  color: #333;
}

.refund-input {
  input {
    width: 100%;
    height: 80rpx;
    padding: 0 20rpx;
    border: 1rpx solid #d9d9d9;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #333;
  }

  .input-placeholder {
    color: #999;
  }
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
}

.modal-btn {
  flex: 1;
  padding: 28rpx;
  text-align: center;
  cursor: pointer;

  text {
    font-size: 32rpx;
    font-weight: 600;
  }

  &:active {
    opacity: 0.8;
  }
}

.btn-cancel {
  border-right: 1rpx solid #f0f0f0;

  text {
    color: #666;
  }
}

.btn-confirm {
  text {
    color: #ffb200;
  }
}

// 添加标识弹窗样式
.label-modal,
.note-modal,
.ship-modal {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.modal-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title-bar {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.modal-content-label {
  padding: 40rpx;
  min-height: 400rpx;
}

.hint-text {
  display: block;
  font-size: 26rpx;
  color: #999;
  margin-bottom: 60rpx;
  text-align: center;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

.modal-content-note {
  padding: 30rpx 40rpx;
}

.note-textarea {
  width: 100%;
  min-height: 300rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

.textarea-placeholder {
  color: #999;
}

.char-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 16rpx;
}

// 发货弹窗内容
.modal-content-ship {
  padding: 30rpx 40rpx;
}

.ship-info {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .info-label {
    font-size: 28rpx;
    color: #666;
    flex-shrink: 0;
  }

  .info-value {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    margin-left: 12rpx;
  }
}

.ship-input-wrapper {
  margin-top: 20rpx;

  .input-label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    font-weight: 500;
  }

  .ship-input {
    width: 100%;
    height: 80rpx;
    padding: 0 20rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #333;
  }

  .input-placeholder {
    color: #999;
  }
}

.modal-single-button {
  padding: 20rpx 40rpx;
}

.single-btn {
  background-color: #ffb200;
  border-radius: 50rpx;
  padding: 24rpx;
  text-align: center;

  text {
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
  }

  &:active {
    opacity: 0.8;
  }
}
</style>
